<script setup lang="ts">
// 获取屏幕边界到安全区域距离
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import CustomContainer from '@/components/CustomContainer.vue'
import { unFinished } from '@/utils/unFinished.ts'

const pages = getCurrentPages()

// 搜索关键词
const keyword = ref('')
// 搜索历史
const searchHistory = ref<string[]>([])

// 初始化加载历史记录
onShow(() => {
  searchHistory.value = uni.getStorageSync('searchHistory') || []
})
const goSearchResult = () => {
  if (!keyword.value.trim()) {
    uni.showToast({ title: '请输入关键词', icon: 'none' })
    return
  }

  // 更新搜索历史
  const index = searchHistory.value.indexOf(keyword.value)
  if (index > -1) {
    // 如果已存在则先移除
    searchHistory.value.splice(index, 1)
  }
  searchHistory.value.unshift(keyword.value)
  uni.setStorageSync('searchHistory', searchHistory.value)

  unFinished()
}

// 使用历史记录搜索
const useSearchHistory = (historyKeyword: string) => {
  keyword.value = historyKeyword
  goSearchResult()
}

// 清除历史记录
const clearSearchHistory = () => {
  uni.showModal({
    content: '确定要清除所有历史记录吗？',
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = []
        uni.removeStorageSync('searchHistory')
      }
    },
  })
}

// 搜索提示(这个接口坏了，暂时先不实现了)
// const onInput = debounce(async () => {
//   if (keyword.value.trim()) {
//     // const res = await searchTipsApi(keyword.value)
//     // console.log(res)
//   }
// }, 500)
</script>

<template>
  <CustomContainer>
    <template #navbar>
      <!-- logo文字 -->
      <view class="logo">
        <navigator
          v-if="pages.length > 1"
          open-type="navigateBack"
          class="back icon-left"
          hover-class="none"
        ></navigator>
        <navigator
          v-else
          url="/pages/index/index"
          open-type="switchTab"
          class="back icon-home"
          hover-class="none"
        >
        </navigator>
        <image class="logo-image" src="@/static/images/logo.png"></image>
      </view>
      <!-- 搜索条 -->
      <view class="search">
        <input placeholder="搜索小兔鲜商品" v-model="keyword" focus />
        <!-- 清除按钮（带显示条件） -->
        <view v-show="keyword.length > 0" class="clear-icon icon-close" @tap="keyword = ''"></view>
        <button class="search-btn" @tap="goSearchResult">搜索</button>
      </view>
    </template>

    <template #default>
      <view class="history-section">
        <view class="history-header">
          <text>搜索历史</text>
          <text class="clear-btn" v-show="searchHistory.length > 0" @tap="clearSearchHistory"
            >清除
          </text>
        </view>

        <view class="history-list">
          <template v-if="searchHistory.length > 0">
            <view
              v-for="(item, index) in searchHistory"
              :key="index"
              class="history-item"
              @tap="useSearchHistory(item)"
            >
              {{ item }}
            </view>
          </template>
          <view v-else class="no-history">暂无搜索历史</view>
        </view>
      </view>
    </template>
  </CustomContainer>
</template>

<style lang="scss">
.logo {
  display: flex;
  align-items: center;

  .back {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 44px;
    width: 44px;

    font-size: 44rpx;
    /* color: #000; */
    color: #fff;
  }

  .logo-image {
    width: 166rpx;
    height: 39rpx;
  }

  .logo-text {
    flex: 1;
    line-height: 28rpx;
    color: #fff;
    margin: 2rpx 0 0 20rpx;
    padding-left: 20rpx;
    border-left: 1rpx solid #fff;
    font-size: 26rpx;
  }
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 10rpx 0 26rpx;
  height: 64rpx;
  margin: 0 30rpx;

  color: #fff;
  font-size: 28rpx;
  border-radius: 32rpx;
  background-color: rgba(255, 255, 255, 0.5);

  input {
    flex: 1;
    color: #555;
  }

  .clear-icon {
    padding: 8rpx;
    margin-left: 5rpx;

    background-color: #c2c4cc;
    border-radius: 50%;
    scale: 0.8;
  }

  .search-btn {
    width: 120rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin-left: 5rpx;

    text-align: center;
    font-size: 26rpx;
    border-radius: 32rpx;

    color: #fff;
    background-color: #27ba9b;
    opacity: 0.8;
  }
}

.history-section {
  padding: 0 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); // 添加阴影

  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 28rpx;
    color: #666;

    .clear-btn {
      font-size: 24rpx;
      color: #999;
      padding: 8rpx 20rpx;
      border-radius: 40rpx;
      border: 1rpx solid #ddd;
    }
  }

  .history-list {
    min-height: 100rpx;

    .history-item {
      display: inline-block;
      padding: 12rpx 24rpx;
      margin: 20rpx 20rpx 0 0;
      background-color: #f5f5f5;
      border-radius: 40rpx;
      font-size: 26rpx;
      color: #333;
    }

    .no-history {
      padding: 40rpx 0;
      text-align: center;
      color: #999;
      font-size: 26rpx;
    }
  }
}
</style>
